<html>
<head>
	<title></title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
	<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="ext/ext-all.js"></script>
	<script type="text/javascript" src="chapter10-1.js"></script>
	<style type="text/css">
		body { background: url(stripe.png);font-family: verdana; font-size: 62.5%; margin: 0px;  }
		h1 { margin: 10px; }
		div#container { margin: 10px auto; width: 110px; padding: 10px; border: 3px double white;}
		div div{ width: 100px; height: 100px; background: white; border: 1px solid #ccc; }
		div div p { margin: 10px; }
		span { background: white; border: 1px solid #ccc; }
	</style>
</head>
<body>
	<h1>Chapter 10: Effects</h1>
	
	<p><a href="javascript:fx.fadeout();">Fade Out</a></p>
	<p><a href="javascript:fx.fadein();">Fade In</a></p>
	<p><a href="javascript:fx.frame();">Frame</a></p>
	<p><a href="javascript:fx.ghost();">Ghost</a></p>
	<p><a href="javascript:fx.highlight();">highlight</a></p>
	<p><a href="javascript:fx.puff();">Puff</a></p>
	<p><a href="javascript:fx.scale();">Scale</a></p>
	<p><a href="javascript:fx.slidein();">slidein</a></p>
	<p><a href="javascript:fx.slideout();">slideout</a></p>
	<p><a href="javascript:fx.switch();">switch</a></p>
	<p><a href="javascript:fx.shift();">shift</a></p>
	
	<div id="container">	
		<p>Text at the top.</p>
		
		<div id="block">
			<p>I Am A Block Element</p>
		</div>
		
		<p>Text in the middle.</p>
		
		<span id="inline">I Am An Inline Element</span>

		<p>Text at the bottom.</p>
	</div>
</body>
</html>


